<template>
 <el-row>
 <el-col :span="12">	
 <div class="title-left">
   <img  src="../assets/dishui.png">
   </div>
   </el-col>
    <el-col :span="12">
			<div class="title-rigth"></div>
      <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="10" class="demo-ruleForm">
				<div class="myInput username1">
					<el-form-item prop="tel">
						<el-input class="myInput1 myInput2"  prefix-icon="el-icon-phone" v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
					</el-form-item>
				</div>
				<div class="myInput username1">
					<el-form-item prop="tel">
						<el-input class="myInput1 myInput2" prefix-icon="el-icon-magic-stick" placeholder="请输入门牌号" v-model="ruleForm.houseNumber" clearable></el-input>
					</el-form-item>
				</div>

				<div class="login">
					<el-form-item>
						<el-button class="logBtn" @click="submitForm('ruleForm')">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
      </el-col>
    </el-row>
   
</template> 

<script>
import axios from 'axios'
import myapi from '../api.js'
  export default {
    name:"Inquire",
    data(){
      return{
        date:{},
				ruleForm: {
					phone: '',
					houseNumber: '',
				},
      }
    },
methods:{
  submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post(myapi.getByIdHousing.url,{
              houseNumber: this.ruleForm.houseNumber,
              phone: this.ruleForm.phone,
            })
            .then((res) => {
              if (res.data) {
                //显示登录结果
                console.log('查询成功')
                this.date=res.data;
                console.log(res.data)
                console.log(this.date)
               this.$router.push({
			          path: '/pay',
			          query:{
                  pay:this.date
                }
			        })

                
              } else {
                console.log('查询失败')
              }
            })
        } 
      })
    },
  }
  	 
}
</script>

<style>

.logo {
		margin: 0 auto;
	}

	.loginImg {
		width: 700px;
		margin: 0 auto;
		float: right;
	}

	/* ------------------------------ */

	.title-left {
		margin-top: 5%;
		width: 40%;
		text-align: center;
    float:left;
    margin-right: 250px;
	}
  	.title-rigth {
		margin-top: 5%;
		width: 40%;
    height: 250px;
		text-align: center;
    float:right;
    margin-right: 250px;
	}

	.head {
    margin-top:10%;
		width: 450px;
    float: left;
	}
	.login {
		width: 350px;
	}

	.username1 {
		width: 40%;
		margin-top: 10%;
		margin-left: auto;
		margin-right: auto;
	}

	.password {
		width: 40%;
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
	}

	.login {
		margin-top: 8%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.logBtn {
		width: 100px;
		height: 40px;
		border-radius: 25px;
		border: none;
		outline: none;
		background-color: #4F6E9D;
		color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.logBtn:focus,.logBtn:hover {
		color: #FFFFFF;
		border-color: #7E9DCA;
		background-color: #7E9DCA;
	}
	
	.logBtn:active {
		color: #FFFFFF;
		border-color: #7E9DCA;
		outline: 0;
	}

	.link {
		margin-top: 10%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
</style>